<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport"
        content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
    <title>S3MTilesLayer</title>
    <link href="./Cesum-1.67/Cesium/Widgets/widgets.css" rel="stylesheet" />
    <script src="./Cesum-1.67/Cesium/Cesium.js"></script>
    <script src="./lib/jquery.min.js"></script>
    <script src="./SuperMap3D/SuperMap3D.js"></script>
    <style>
        html,
        body,
        #cesiumContainer {
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
            overflow: hidden;
        }

        .toolbar {
            position: absolute;
            left: 3%;
            top: 2%;
            width: 200px;
            height: auto;
            background-color: white;
            display: flex;
            justify-content: space-between;
            padding: 10px;
            border-radius: 4px;
            font-size: 14px;
        }
    </style>
</head>

<body>
    <div id="cesiumContainer"></div>
    <div class="toolbar">
        <select id="my-select" style="width: 100%;padding: 2px">
            <option value="0">倾斜摄影</option>
            <option value="1">CBD</option>
            <option value="2">重庆白模</option>
            <option value="3">点云</option>
        </select>
    </div>

    <script type="module">
        let viewer = new Cesium.Viewer('cesiumContainer');
        viewer.scene.postProcessStages.fxaa.enabled = true;
        let scenes = [
            'http://www.supermapol.com/realspace/services/3D-suofeiya_church/rest/realspace',
            'https://www.supermapol.com/realspace/services/3D-CBD/rest/realspace',
            'https://www.supermapol.com/realspace/services/3D-CQmodel_wireframe_2000/rest/realspace',
            'https://www.supermapol.com/realspace/services/3D-cloud/rest/realspace'
        ];
        viewer.scene.open(scenes[0]);

        $("#my-select").change(function () {
            // viewer.scene.primitives.removeAll();
            viewer.scene.open(scenes[this.value]);
        });

    </script>
</body>

</html>